<script lang="tsx" setup>
/**
 *  库存盘点表单
 */
import { ref, nextTick, reactive } from "vue"
import { definePageModel, PageModel } from "@/frame/view/layout/page-model/constructor.ts"
import { defineDialogForm, DialogForm } from "@/frame/components/base/dialog-form/constructor.ts"
import { defineSheetForm, SheetForm } from "@/frame/components/base/sheet-form/constructor.ts"
import PageAsideTable from "@/frame/view/layout/page-aside-table/index.vue"
import { getCode } from "@/utils/get-code"
import { CodeRuleTypeEnum } from "@/utils/enum"
import { processRequest } from "@/frame/apis/request"

/**
 * 定义emit
 */
const emit = defineEmits<{
    (e: "confirm"): void
}>()

/**
 * 下拉列表
 */
const reflections = reactive<{
    goodsList: any[];
    warehouseList: any[];
    warehousePositionList: any[];
}>({
    goodsList: [],
    warehouseList: [],
    warehousePositionList: [],
})

/**
 * 获取物料列表
 */
const getGoodsList = async () => {
    const result: any = await processRequest.get("/api/Goods", {
        IsEnable: true,
        currentPage: 1,
        pageSize: 9999
    });
    reflections.goodsList = result.dataList;
}

/**
 * 获取仓库列表
 */
const getWarehouseList = async () => {
    const result: any = await processRequest.get("/api/Warehouse/Select")
    reflections.warehouseList = result;
}

/**
 * 获取仓位列表
 */
const getWarehousePositionList = async () => {
    const result: any = await processRequest.get("/api/WarehousePosition/Select")
    reflections.warehousePositionList = result;
}

getGoodsList()
getWarehouseList()
getWarehousePositionList()

/**
 * 弹窗实例
 */
const dialogFormRef = ref()
const dialogFormConfig = defineDialogForm({
    width: "1200px",
    title: "库存盘点子单详情"
})

/**
 * 表单实例
 */
const sheetFormModelRef = ref()
const form = defineSheetForm<any>({
    async bindData(data: any) {
        console.log(data)
        if (!data.id) {
            data.code = await getCode(CodeRuleTypeEnum.库存盘点表)
        }
        return data
    },
    labelWidth: "90px",
    els: [
        {
            label: "单据编码",
            eType: "el-input",
            prop: "code",
            renderFn(data) {
                return <span>{data.code} </span>
            }
        },
        {
            label: "备注",
            eType: "el-input",
            prop: "remark",
            props: {
                placeholder: "备注",
                clearable: true
            }
        }
    ]
})

/**
 * 页面实例
 */
const pageModelRef = ref()
const config = definePageModel<any>({
    url: "",
    getImmediate: false,
    programForm: {
        els: [
            {
                label: "新增数据",
                eType: "el-button",
                props: {
                    type: "primary"
                },
                event: "add"
            }
        ]
    },
    table: {
        page: {
            enable: true,
            pageSize: 20
        },
        props: {
            stripe: false,
            border: false
        },
        operation: {
            width: 80,
            props: {
                fixed: "right"
            },
            els: [
                {
                    eType: "el-button",
                    label: "删除",
                    event: "delete",
                    props: {
                        type: "primary",
                        link: true
                    },
                    hide: false
                }
            ]
        },
        els: [
            {
                label: "物料",
                prop: "goodsId",
                minWidth: 120,
                renderFn(data) {
                    /**
                     * 监听修改
                     */
                    const handleInput = (value: any) => {
                        data.goodsId = value
                    }

                    return <el-select modelValue={data.goodsId} onUpdate:modelValue={handleInput} >
                        {
                            reflections.goodsList.map((item: any) => {
                                return <el-option label={item.name} value={item.id} />
                            })
                        }
                    </el-select>
                }
            },
            {
                label: "仓库",
                prop: "warehouseId",
                minWidth: 120,
                renderFn(data) {
                    /**
                     * 监听修改
                     */
                    const handleInput = (value: any) => {
                        data.warehouseId = value
                    }

                    return <el-select modelValue={data.warehouseId} onUpdate:modelValue={handleInput} >
                        {
                            reflections.warehouseList.map((item: any) => {
                                return <el-option label={item.name} value={item.id} />
                            })
                        }
                    </el-select>
                }
            },
            {
                label: "仓位",
                prop: "warehousePositionId",
                minWidth: 120,
                renderFn(data) {
                    /**
                     * 监听修改
                     */
                    const handleInput = (value: any) => {
                        data.warehousePositionId = value
                    }

                    return <el-select modelValue={data.warehousePositionId} onUpdate:modelValue={handleInput} >
                        {
                            reflections.warehousePositionList.map((item: any) => {
                                return <el-option label={item.name} value={item.id} />
                            })
                        }
                    </el-select>
                }
            },
            {
                label: "批次号",
                prop: "batchNumber",
                minWidth: 120,
                renderFn(data) {
                    /**
                     * 监听修改
                     */
                    const handleInput = (value: any) => {
                        data.batchNumber = value
                    }

                    return <el-input modelValue={data.batchNumber} onUpdate:modelValue={handleInput} />
                }
            },
            {
                label: "库存数",
                prop: "number_Real",
                minWidth: 120,
                renderFn(data) {
                    /**
                     * 监听修改
                     */
                    const handleInput = (value: any) => {
                        data.number_Real = value
                    }

                    return <el-input modelValue={data.number_Real} onUpdate:modelValue={handleInput} />
                }
            },
            {
                label: "盘点数",
                prop: "number_Stocktaking",
                minWidth: 120,
                renderFn(data) {
                    /**
                     * 监听修改
                     */
                    const handleInput = (value: any) => {
                        data.number_Stocktaking = value
                    }

                    return <el-input modelValue={data.number_Stocktaking} onUpdate:modelValue={handleInput} />
                }
            },
            {
                label: "备注",
                prop: "remark",
                minWidth: 120,
                renderFn(data) {
                    /**
                     * 监听修改
                     */
                    const handleInput = (value: any) => {
                        data.remark = value
                    }

                    return <el-input modelValue={data.remark} onUpdate:modelValue={handleInput} />
                }
            }
        ]
    }
})

/**
 * 显示
 */
const show = () => {
    nextTick(() => {
        dialogFormRef.value.show()
        nextTick(() => {
            sheetFormModelRef.value.initFormData()
            pageModelRef.value.setTableData([{
                rowKey: 1
            }])
        })
    })
}

/**
 * 新增
 */
const handleAdd = async () => {
    const tableData = await pageModelRef.value.getTableData()
    tableData.push({
        rowKey: tableData[tableData.length - 1].rowKey + 1
    })
    pageModelRef.value.setTableData(tableData)
}

/**
 * 删除
 */
const handleDelete = async (row: any) => {
    let tableData = await pageModelRef.value.getTableData()
    tableData = tableData.filter((item: any) => item.rowKey !== row.rowKey)
    pageModelRef.value.setTableData(tableData)
}

/**
 * 提交
 */
const handleClick = async () => {
    const formData = await sheetFormModelRef.value.getFormData()
    const tableData = await pageModelRef.value.getTableData()
    await processRequest.post("/api/WarehouseStocktaking",
        {
            ...formData,
            items: tableData
        }
    )
    emit('confirm')
    dialogFormRef.value.close()
}

/**
 * 暴露
 */
defineExpose({
    show
})
</script>

<template>
    <DialogForm ref="dialogFormRef" :dialogFormModel="dialogFormConfig">
        <template #default>
            <div style="height: 500px;display: flex;">
                <PageAsideTable>
                    <template #aside>
                        <SheetForm ref="sheetFormModelRef" :SheetFormModel="form" />
                    </template>
                    <template #table>
                        <PageModel ref="pageModelRef" :PageModel="config" @add="handleAdd" @delete="handleDelete" />
                    </template>
                </PageAsideTable>
            </div>
            <div style="text-align: right;">
                <el-button type="primary" @click="handleClick">提交</el-button>
            </div>
        </template>
    </DialogForm>
</template>